<template>
	<div id="content" style="width: 100vw; height: 100vh"></div>
</template>

<script setup>
import * as THREE from 'three'
import { CreateThreeScene } from './common/createScene'
import { onMounted } from 'vue'
let scene
function init() {
	scene = new CreateThreeScene('#content', {
    camera: { z: 5 },
    controls: {
      enableDamping: true,
			dampingFactor: 0.05,
			maxPolarAngle: Math.PI / 2.2,
			minDistance: 10,
			maxDistance: 50
    }
  })
	const geometry = new THREE.BoxGeometry(1, 1, 1)
	const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const mesh = new THREE.Mesh(geometry, material)
	scene.add({
    mesh,
    id: 'box',
    update () {
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
    }
  })
}
onMounted(init)
</script>